<template>
  <div id="register" v-show="isShowRegister">
    <div class="mask">
      <transition mode="out-in" name="login">
        <div class="mini" v-show="isShowRegister">
          <div class="mini-close">
            <el-button
              class="close-btn"
              plain
              size="small"
              icon="el-icon-close"
              circle
              @click="closeRegister"
            ></el-button>
          </div>

          <div class="header">注册账号</div>

          <el-input
            placeholder="请输入用户名"
            suffix-icon="el-icon-user"
            type="username"
            v-model="userRegister.username"
            class="username"
          >
          </el-input>
          <el-input
            placeholder="请输入密码"
            v-model="userRegister.password"
            show-password
            class="password"
          ></el-input>
          <el-input
            placeholder="请重新输入密码"
            v-model="userRegister.passwordConfirm"
            show-password
            class="password"
          ></el-input>
          <div @click="linkToLogin" class="login-text">已有账户，前往登录</div>
          <div class="button-group">
            <el-button
              class="register-btn"
              type="primary"
              round
              @click="register"
              >注册</el-button
            >
            <el-button
              class="reset-btn"
              type="default"
              native-type="reset"
              round
              @click="
                userRegister.username = '';
                userRegister.password = '';
                userRegister.passwordConfirm = '';
              "
              >清空</el-button
            >
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getMatemask } from "@/utils/matemask";
import { userRegister } from "@/api";
import { Loading } from "element-ui";

export default {
  name: "Register",
  data() {
    return {
      userRegister: {
        username: "",
        password: "",
        passwordConfirm: "",
      },
    };
  },
  computed: {
    ...mapState({
      isShowRegister: (store) => store.register.isShowRegister,
    }),
  },
  methods: {
    closeRegister() {
      this.$store.dispatch("showRegister", false);
    },
    async register() {
      let { username, password, passwordConfirm } = this.userRegister;
      // 验证是否为空
      if (
        username.trim() == "" ||
        password.trim() == "" ||
        passwordConfirm.trim() == ""
      ) {
        this.$message({
          message: "请完整输入用户名和密码",
          type: "error",
          customClass: "el-message-custom",
        });
        return false;
      }
      // 两次密码相等
      if (password != passwordConfirm) {
        this.$message({
          message: "两次密码需要相同",
          type: "error",
          customClass: "el-message-custom",
        });
        return false;
      }
      // 验证成功
      // 获取钱包地址
      let web3;
      try {
        web3 = await getMatemask();
      } catch (e) {
        this.$message.error("用户拒绝链接");
        return;
      }
      let accounts = await web3.eth.getAccounts();
      let address = accounts[0];

      // 调用接口注册
      let result = await userRegister({
        username,
        password,
        user_address: address,
      });
      console.log(result);
      // 用户存在
      if (result.flag == false) {
        this.$message({
          message: result.msg,
          type: "error",
          customClass: "el-message-custom",
        });
        // 清空输入
        this.userRegister = { username: "", password: "", passwordConfirm: "" };
      }
      // 成功注册
      if (result.flag == true) {
        this.$message({
          message: result.msg,
          type: "success",
          customClass: "el-message-custom",
        });
        // 切换到登录
        this.$store.dispatch("showRegister", false);
        this.$store.dispatch("showLogin", true);
      }
      // this.$store.dispatch("login", this.userRegister);
    },
    linkToLogin() {
      this.$store.dispatch("showRegister", false);
    },
  },
};
</script>

<style lang="less">
// 动画
.login-enter,
.login-leave-to {
  transform: translateY(100vh);
}
.login-enter-active,
.login-leave-active {
  transition: all 0.5s ease;
}
#register {
  .mask {
    backdrop-filter: blur(30px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 14px;
    z-index: 3000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 420px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    padding: 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 14%;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    .header {
      font-size: 18px;
      color: #505050;
    }
    .mini-close {
      position: absolute;
      right: 15px;
      top: 15px;
      .close-btn:hover {
        color: var(--themeColor1);
        border: var(--themeColor1) 1px solid;
      }
      i {
        font-weight: bold;
      }
    }
    .matemask {
      cursor: pointer;
      margin-top: 20px;
      width: 250px;
      height: 40px;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4831f+0,f38181+100 */
      background: #f4831f; /* Old browsers */
      background: -moz-linear-gradient(
        top,
        #f4831f 0%,
        #f38181 100%
      ); /* FF3.6-15 */
      background: -webkit-linear-gradient(
        top,
        #f4831f 0%,
        #f38181 100%
      ); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
        to bottom,
        #f4831f 0%,
        #f38181 100%
      ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4831f', endColorstr='#f38181',GradientType=0 ); /* IE6-9 */

      border-radius: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      .metamask-png {
        width: 25px;
        height: 25px;
        margin-left: 10px;
        img {
          width: 100%;
        }
      }
    }
    .username {
      margin-top: 20px;
    }
    .password {
      margin-top: 20px;
    }
    .login-text {
      margin-top: 20px;
      cursor: pointer;
    }
    .login-text:hover {
      color: var(--themeColor1);
    }
    .button-group {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .register-btn {
        background: var(--themeColor1);
        border: var(--themeColor1) 1px solid;
      }
      .reset-btn:hover {
        background: var(--themeColor1);
        border: var(--themeColor1) 1px solid;
        opacity: 0.4;
        color: #fff;
      }
    }
  }
}
</style>